<template>
<div class="home-box" id="bx" ref="boxRef">
  <span class="home-box-fls home-box-left"  @click="clickChange(false)" >
    <span class="iconfont home-box-span icon-shangyiye"></span>
  </span>
  <span class="home-box-fls home-box-right" @click="clickChange(true)">
    <span class="iconfont home-box-span icon-xiayiye" ></span>
  </span>
  <div class="home-container" @mousemove.self="move" ref="hCon">
    <div class="home-war-body" ref="hWBody" >
        <div class="home-img-con" v-for="(img,index) in bannerList" :key="img._id"> 
           <ImgThumb :thumb="baseUrl+img.thumb" :imgUrl="baseUrl+img.imgUrl" ></ImgThumb>
        </div>        
    </div>
  </div>
  </div>
</template>

<script>
import {ref,onMounted} from 'vue';
import ImgThumb from '../../components/imgThumb/imgThumb.vue';
import{getBanner}from '../../api/getHomeInfo';
import {baseUrl} from '../../config';

export default {
  components:{
    ImgThumb
  },
  setup(p,cxt){
    const boxRef = ref(null);
    const hCon = ref(null);
     const hWBody = ref(null);
    const backgroundImage = ref(null);
    const bannerList = ref([]);
    (
      async ()=>{
        const result = await getBanner();
        bannerList.value = result.banner;
        backgroundImage.value = result.background;
      }
    )();
    const changeandim = (name)=>{
        hWBody.value.style.animation= `${name} 15s linear infinite`;
    }

    const clickChange = (is)=>{

        if(is){
          changeandim("roun");
        }else{
          changeandim("roun1");
        }

    }

    const move = ($eval)=>{
          hCon.value.style.perspectiveOrigin =`${$eval.offsetX}px ${$eval.offsetY}px `;
       }

    onMounted(()=>{
   
    setTimeout(()=>{
      boxRef.value.style.backgroundImage = `url(${baseUrl}${backgroundImage.value.imgUrl})`
    },20)
        
    })
    return{
     boxRef,
     bannerList,
     backgroundImage,
     baseUrl,
     hCon,
     move,
     hWBody,
     clickChange
    }
  }

}
</script>

<style lang="less"  >
@import url("../../assets/css/iconfont.css");
.home-box{
  height: 100%;
  width: 100%;
  background-image: url("http://localhost:12000/assets/thumb/binggongzhu4.jpg");
  background-position: center center;

}

  .home-box-fls{

    position:fixed;
    z-index: 100;
    width: 50px;
    height: 50px;
    color: #fff;
   
    border-radius: 6px;
    cursor: pointer;
    top: 50%;
    font-size: 30px;
     animation: roun2 2s linear infinite;

     &:hover{
       animation: none;
     }
    .home-box-span{
        line-height: 50px;
        position: relative;
        left: 10px;
    }
  }

  .home-box-right{
    right: 0;
  }
  .home-container{
      width: 100%;
      height: 100%;
      perspective: 2000px;
      transform-style: preserve-3d;
     cursor:ne-resize;
      //  transform: rotateX(-6deg);
      //  animation:  roun1 15s linear infinite;
    .home-war-body{
      position: absolute;
      left: 50%;
      top: 50%;
      width: 450px;
      height: 150px;
     
      transform-style: preserve-3d;
     animation: roun 15s linear infinite;
     

      .home-img-con{
        position: absolute;
        width: 300px;
        height: 200px; 
        backface-visibility: visible;
        img {
          border-radius: 5px;
        }
      }
      .home-img-con:nth-of-type(1){
        transform: rotateY(45deg) translateZ(400px);
       
      }
      .home-img-con:nth-of-type(2){
        transform: rotateY(90deg) translateZ(400px);
        
      }
      .home-img-con:nth-of-type(3){
        transform: rotateY(135deg) translateZ(400px);
        
      }
      .home-img-con:nth-of-type(4){
        transform: rotateY(180deg) translateZ(400px);
        
      }
      .home-img-con:nth-of-type(5){
        transform: rotateY(225deg) translateZ(400px);
         
      }
      .home-img-con:nth-of-type(6){
        transform: rotateY(270deg) translateZ(400px);
        
      }
      .home-img-con:nth-of-type(7){
        transform: rotateY(315deg) translateZ(400px);
        
      }
      .home-img-con:nth-of-type(8){
        transform: rotateY(360deg) translateZ(400px);
        
      }
    }
  

  }
  @keyframes roun{
    0%{
      transform:translate(-50%,-50%) rotateY(0deg) ;
    }
    100%{
       transform:translate(-50%,-50%) rotateY(360deg) ;
    }
  }
   @keyframes roun1{
    0%{
      transform:translate(-50%,-50%)  rotateY(360deg) ;
    }

    100%{
       transform:translate(-50%,-50%) rotateY(0deg) ;
    }
    
  }
   @keyframes roun2{
    0%{
      opacity: 1;
    }
    50%{
      opacity: 0.1
    }
    100%{
       opacity: 1;
    }
    
  }
</style>